<template>
<h1>个人简历练习</h1>
  <table border="1px">
    <caption>个人简介</caption>
    <tr>
      <td>照片:</td>
      <td>
        <img :src="imgUrl" alt="">
      </td>
    </tr>
    <tr><td>姓名:</td><td>{{name}}</td></tr>
    <tr><td>年龄:</td><td>{{age}}</td></tr>
    <tr>
      <td>好友:</td>
      <td>
          <ul>
            <li v-for="f in friends">{{f}}</li>
          </ul>
      </td>
    </tr>
  </table>
  <button @click="add()">点击渲染</button>
</template>

<script setup>
import {ref} from 'vue';
const person =ref({
  name:'传奇哥',
  age:'45',
  imgUrl:'fcq.jpg',
  friends:['路飞','索隆','娜美','张飞']
});


const name =ref('');
const age =ref('');
const imgUrl =ref('');
const friends =ref([]);

const add =()=>{
  name.value =person.value.name;
  age.value =person.value.age;
  imgUrl.value=person.value.imgUrl;
  friends.value =person.value.friends;
}
</script>


<style scoped>

</style>